<template>
	<view class="content">
		<view class="headerimg">
			<image src="../../static/index/医疗风险分担机制.png" mode=""></image>
		</view>
		<view class="contentInput">
			<view class="contentInputText"><span>* </span>就诊医院</view>
			<view class="contentInputText1">医疗意外保障计划医院(平安产险)</view>
			<u-gap height="1" bg-color="#EBEBEB"></u-gap>
		</view>
		<!-- 表单内容 -->
		<view class="contentInput">
			<view class="contentInputText"><span>* </span>科室</view>
			<view @click="showPopup" class="contentInputText1">{{contentinfo.Department}}
				<image src="../../static/index/箭头-右 拷贝.png" mode=""></image>
			</view>
			<u-gap height="1" bg-color="#EBEBEB"></u-gap>
		</view>
		<view v-show="tabulation" class="contentInput">
			<view class="contentInputText"><span>* </span>谈话医生</view>
			<view @click="show1=true" class="contentInputText1">{{contentinfo.doctor}}
				<image src="../../static/index/箭头-右 拷贝.png" mode=""></image>
			</view>
			<u-gap height="1" bg-color="#EBEBEB"></u-gap>
		</view>
		<view v-show="tabulation" class="contentInput">
			<view class="contentInputText"><span>* </span>手术类型</view>
			<view @click="show2=true" class="contentInputText1">{{contentinfo.Surgicaltype}}
				<image src="../../static/index/箭头-右 拷贝.png" mode=""></image>
			</view>
			<u-gap height="1" bg-color="#EBEBEB"></u-gap>
		</view>
		<view v-show="tabulation" class="contentInput">
			<view class="contentInputText"><span>* </span>手术级别</view>
			<view @click="show3=true" class="contentInputText1">{{contentinfo.Surgicallevel}}
				<image src="../../static/index/箭头-右 拷贝.png" mode=""></image>
			</view>
			<u-gap height="1" bg-color="#EBEBEB"></u-gap>
		</view>
		<view style="width:88%;margin-left:6%;margin-top: 30rpx;margin-bottom: 100rpx;">

			<navigator url="/pages/home/index" hover-class="navigator-hover">
				<u-button type="primary" shape="square">下一步</u-button>
			</navigator>
		</view>
		<!-- 弹出层科室 -->
		<u-popup :show="show" mode="bottom" border-radius="30rpx" @close="closePopup" mask=false>
			<!--弹出层内容-->
			<view class="popup-content">
				<view class="popubTitle">
					请选择科室
				</view>
				<scroll-view scroll-y="true" style="height: 320rpx;">
					<view v-for="(item,index) in Departmentlist" class="popubcontent">
						<view @click="Departmentclick(item)" class="">
							{{item}}
						</view>
						<u-gap height="1rpx" bg-color="#EBEBEB"></u-gap>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 弹出层医生 -->
		<u-popup :show="show1" mode="bottom" border-radius="30rpx" @close="closePopup" mask=false>
			<!--弹出层内容-->
			<view class="popup-content">
				<view class="popubTitle">
					请选择谈话医生
				</view>
				<scroll-view scroll-y="true" style="height: 320rpx;">
					<view v-for="(item,index) in doctorlist" class="popubcontent">
						<view @click="doctorclick(item)" class="">
							麻醉科<span style="color: #666;font-size: 27rpx;margin-left: 20rpx;">{{item}}</span>
						</view>
						<u-gap height="1rpx" bg-color="#EBEBEB"></u-gap>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 弹出层手术类型 -->
		<u-popup :show="show2" mode="bottom" border-radius="30rpx" @close="closePopup" mask=false>
			<!--弹出层内容-->
			<view class="popup-content">
				<view class="popubTitle">
					请选择手术类型
				</view>
				<scroll-view scroll-y="true" style="height: 320rpx;">
					<view v-for="(item,index) in Surgicaltypelist" class="popubcontent">
						<view @click="Surgicaltypeclick(item)" class="">
							{{item}}
						</view>
						<u-gap height="1rpx" bg-color="#EBEBEB"></u-gap>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 弹出层手术级别 -->
		<u-popup :show="show3" mode="bottom" border-radius="30rpx" @close="closePopup" mask=false>
			<!--弹出层内容-->
			<view class="popup-content">
				<view class="popubTitle">
					请选择手术级别
				</view>
				<scroll-view scroll-y="true" style="height: 320rpx;">
					<view v-for="(item,index) in Surgicallevellist" class="popubcontent">
						<view @click="Surgicallevelclick(item)" class="">
							{{item}}
						</view>
						<u-gap height="1rpx" bg-color="#EBEBEB"></u-gap>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentinfo: {
					Department: '请选择',
					doctor: '请选择',
					Surgicaltype: '请选择',
					Surgicallevel: '请选择',
				},
				show: false,
				show1: false,
				show2: false,
				show3: false,
				tabulation: false,
				Departmentlist: ['麻醉科', '神经科', '放射科', '骨科', '口腔科'],
				doctorlist: ['主任医师', '副主任医师', '主治医师'],
				Surgicaltypelist: ['择期手术', '急诊手术或紧急手术', ],
				Surgicallevellist: ['四级手术', '非四级手术(1,2,3级)', ]
			}
		},
		onLoad() {

		},
		methods: {
			showPopup() {
				this.show = true;
			},
			closePopup() {
				this.show = false;
			},
			Departmentclick(item) {
				this.contentinfo.Department = item
				this.show = false;
				this.tabulation = true
				this.show1 = true;
			},
			doctorclick(item) {
				this.contentinfo.doctor = item
				this.show1 = false;
				this.show2 = true;
			},
			Surgicaltypeclick(item) {
				this.contentinfo.Surgicaltype = item
				this.show2 = false;
				this.show3 = true;
			},
			Surgicallevelclick(item) {
				this.contentinfo.Surgicallevel = item
				this.show3 = false;
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 120%;
		/* background: #fff; */
	}

	.headerimg {
		width: 100%;
	}

	.headerimg image {
		width: 100%;
		height: 522rpx;
	}

	.contentInput {
		padding: 3% 7%;
		width: 86%;
	}

	.contentInputText {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 27rpx;
		color: #000000;
		line-height: 38rpx;
	}

	.contentInputText span {
		color: #EF0333;
		margin-right: 10rpx;
	}

	.contentInputText1 {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #666666;
		height: 80rpx;
		line-height: 80rpx;
		text-indent: 10rpx;
	}

	.contentInputText1 image {
		float: right;
		width: 16rpx;
		height: 26rpx;
		margin-top: 25rpx;
	}

	.popup-content {
		height: 400rpx;
		/* width: 100%;
		background: #fff;
		border-radius: 50rpx; */
		padding: 3%
	}

	.content /deep/.u-popup__content {
		/* padding: 0% 1.5%; */
		/* background-color: rgba(0,0,0,0) !important; */
	}

	.popubTitle {
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 80rpx;
	}

	.popubcontent {
		font-size: 29rpx;
		font-family: PingFang SC;
		line-height: 70rpx;
	}
</style>